<template>
  <div class="dashboard-container">
    <!-- 顶部标题 -->
    <div class="dashboard-header">
      <h2>餐饮数据看板</h2>
    </div>

    <!-- 内容容器：Grid 布局控制大区域 -->
    <div class="dashboard-grid">
      <!-- 折线图：每日订单趋势 -->
      <div class="chart-card">
        <div class="chart-title">每日订单趋势</div>
        <div ref="lineChart" class="chart-content"></div>
      </div>

      <!-- 柱状图：热销菜品排行 -->
      <div class="chart-card">
        <div class="chart-title">热销菜品排行</div>
        <div ref="barChart" class="chart-content"></div>
      </div>

      <!-- 饼图：菜品分类占比 -->
      <div class="chart-card">
        <div class="chart-title">菜品分类占比</div>
        <div ref="pieChart" class="chart-content"></div>
      </div>

      <!-- 雷达图：菜品质量分析 -->
      <div class="chart-card">
        <div class="chart-title">菜品质量分析</div>
        <div ref="radarChart" class="chart-content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

export default {
  setup() {
    // 图表容器引用
    const lineChart = ref(null);
    const barChart = ref(null);
    const pieChart = ref(null);
    const radarChart = ref(null);

    // ECharts 实例
    let lineInstance, barInstance, pieInstance, radarInstance;

    // 初始化图表（逻辑不变，可根据实际数据调整）
    const initCharts = () => {
      // 1. 折线图：每日订单趋势
      lineInstance = echarts.init(lineChart.value);
      //图表配置
      lineInstance.setOption({
        tooltip: { trigger: 'axis' }, // 鼠标悬停时显示坐标轴提示
        legend: { bottom: 10, left: 'center', orient: 'horizontal' }, // 图例位置在下、居中、水平排列
        grid: { left: '3%', right: '3%', bottom: '15%', containLabel: true }, // 图表边距
        xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
        yAxis: { type: 'value', name: '订单量' },
        series: [
          { name: '早餐', type: 'line', data: [120, 150, 130, 140, 160, 220, 250], smooth: true },
          { name: '午餐', type: 'line', data: [350, 400, 380, 420, 450, 550, 600], smooth: true },
          { name: '下午茶', type: 'line', data: [80, 90, 100, 110, 120, 180, 200], smooth: true },
          { name: '晚餐', type: 'line', data: [400, 450, 420, 500, 520, 650, 700], smooth: true },
          { name: '夜宵', type: 'line', data: [50, 60, 70, 80, 90, 150, 180], smooth: true },
        ],  //数据系列
        color: ['#e74c3c', '#f39c12', '#f1c40f', '#2ecc71', '#3498db'],
      });

      // 2. 柱状图：热销菜品排行
      barInstance = echarts.init(barChart.value);
      barInstance.setOption({
        tooltip: { trigger: 'axis' },
        legend: { bottom: 10, left: 'center', orient: 'horizontal' },
        grid: { left: '3%', right: '3%', bottom: '15%', containLabel: true },
        xAxis: { 
          type: 'category', 
          data: ['意大利面', '披萨', '沙拉', '牛排', '甜点', '汉堡', '炸鸡', '寿司', '汤品', '主食'],
          axisLabel: { rotate: 30, margin: 10 }
        },
        yAxis: { type: 'value', name: '销量' },
        series: [
          { name: '本周销量', type: 'bar', data: [856, 734, 489, 678, 555, 432, 567, 345, 421, 512], barWidth: '40%' },
          { name: '上周销量', type: 'bar', data: [756, 634, 429, 578, 505, 382, 517, 315, 381, 462], barWidth: '40%' },
        ],
        color: ['#f39c12', '#3498db'],
      });

      // 3. 饼图：菜品分类占比
      pieInstance = echarts.init(pieChart.value);
      pieInstance.setOption({
        tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
        legend: { bottom: 10, left: 'center', orient: 'horizontal' },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '40%'],
            data: [
              { value: 1856, name: '主菜' },
              { value: 934, name: '汤类' },
              { value: 689, name: '沙拉' },
              { value: 578, name: '甜点' },
              { value: 455, name: '饮品' },
              { value: 320, name: '主食' },
              { value: 250, name: '小吃' },
            ],
            color: ['#e74c3c', '#f39c12', '#2ecc71', '#f1c40f', '#3498db', '#9b59b6', '#1abc9c'],
          },
        ],
      });

      // 4. 雷达图：菜品质量分析
      radarInstance = echarts.init(radarChart.value);
      radarInstance.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: 10, left: 'center', orient: 'horizontal' },
        radar: {
          indicator: [
            { name: '美味度', max: 100 },
            { name: '新鲜度', max: 100 },
            { name: '出餐速度', max: 12 },
            { name: '摆盘美观', max: 100 },
            { name: '回头率', max: 100 },
            { name: '性价比', max: 100 },
          ],
          radius: '60%',
          center: ['50%', '40%'],
          axisLine: { lineStyle: { color: '#999' } },
          splitLine: { lineStyle: { color: 'rgba(153,153,153,0.2)' } },
        },
        series: [
          {
            type: 'radar',
            data: [
              { value: [98, 95, 8, 92, 85, 90], name: '意大利面' },
              { value: [92, 89, 10, 88, 78, 85], name: '披萨' },
              { value: [95, 98, 7, 96, 90, 80], name: '牛排' },
              { value: [88, 96, 9, 94, 75, 88], name: '沙拉' },
              { value: [90, 85, 8, 98, 82, 83], name: '甜点' },
            ],
            color: ['#e74c3c', '#f39c12', '#2ecc71', '#f1c40f', '#3498db'],
            areaStyle: { opacity: 0.2 },
          },
        ],
      });
    };

    // 监听窗口变化，自适应图表
    const handleResize = () => {
      [lineInstance, barInstance, pieInstance, radarInstance].forEach(chart => chart && chart.resize());
    };



  // 创建小星星并添加到页面中
    const addStarOnMove = (event) => {
      let star = document.createElement("span");

      // 固定为小星星字符
      let starChar = "☆";
      
      // 随机生成颜色
      let colors = ["#FFD700", "#FFA500", "#FFFF00", "#ADD8E6", "#FFFFFF", "#FF69B4", "#9370DB", "#FF4500"];
      let randColorIdx = Math.floor(Math.random() * colors.length);
      let color = colors[randColorIdx];
      
      // 随机生成大小 (16px 到 32px 之间)
      let sizes = [16, 18, 20, 22, 24, 26, 28, 30, 32];
      let randSizeIdx = Math.floor(Math.random() * sizes.length);
      let size = sizes[randSizeIdx];

      // 设置星星样式和内容
      star.classList.add("star");
      star.innerHTML = starChar;
      star.style.color = color;
      star.style.fontSize = size + "px";

      // 显示星星，计算相对页面的坐标和星星尺寸
      document.body.appendChild(star);
      let offsetX = event.pageX;
      let offsetY = event.pageY;
      let starWidth = star.offsetWidth;
      let starHeight = star.offsetHeight;

      // 根据鼠标位置计算星星需要偏移的距离
      let offsetLeft = -starWidth / 2;
      let offsetTop = -starHeight / 2;

      // 定位星星
      star.style.left = (offsetX + offsetLeft) + "px";
      star.style.top = (offsetY + offsetTop) + "px";

      // 更新样式和设置动画效果
      star.style.display = "inline";
      star.classList.add("floating-star");
      
      // 动画结束后移除元素
      setTimeout(() => {
        star.remove();
      }, 2000);
    };

    // 生命周期：初始化图表和鼠标动画
    onMounted(() => {
      initCharts();
      window.addEventListener('resize', handleResize);
      document.addEventListener("mousemove", addStarOnMove);
    });

    // 生命周期：销毁图表和移除鼠标动画事件监听器，释放内存
    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize);
      [lineInstance, barInstance, pieInstance, radarInstance].forEach(chart => chart && chart.dispose());
      document.removeEventListener("mousemove", addStarOnMove);
    });

    return { lineChart, barChart, pieChart, radarChart };
  },
};
</script>

<style scoped>
/* 页面容器：减少顶部空白 */
.dashboard-container {
  max-width: 1600px;
  margin: 20px auto; /* 顶部间距从 40px 减到 20px */
  padding: 10px 20px; /* 顶部内边距从 20px 减到 10px */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 标题区：压缩垂直间距 */
.dashboard-header {
  padding: 10px 20px; /* 垂直内边距从 20px 减到 10px */
  border-bottom: 2px solid #ffe0b2;
  margin-bottom: 20px; /* 标题与图表间距从 30px 减到 20px */
}
.dashboard-header h2 {
  margin: 0;
  font-size: 28px;
  color: #d35400;
  text-align: center;
}

/* 内容 Grid 布局：2 列 2 行 */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 30px;
}

/* 图表卡片：统一样式 */
.chart-card {
  background: #fdf3e6;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s;
}

/* 鼠标悬停动画 */
.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 图表标题：清晰区分 */
.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #e67e22;
  margin-bottom: 15px;
  border-left: 4px solid #e74c3c;
  padding-left: 10px;
}

/* 图表内容容器：确保尺寸 */
.chart-content {
  flex: 1;
  width: 100%;
  min-height: 300px;
}

/* 响应式适配：小屏幕下堆叠 */
@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
  }
  .chart-content {
    min-height: 250px;
  }
}
</style>

<style>
.star {
  position: absolute;
  display: none;
  user-select: none;
  pointer-events: none;
  z-index: 1000;
}

.floating-star {
  animation: floatAndFade 2s ease-in-out forwards;
}

@keyframes floatAndFade {
  0% {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
  70% {
    transform: translateY(-150px) scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-200px) scale(1.2);
    opacity: 0;
  }
}
</style>